<template>
	<view class="" style="padding: 30rpx 0 0 0;" v-if="pageShow">
		<view class="tybjs mainpadding">
			<view class="flexbetween xiahuaxian">
				<view class="ershiba xiaohei fonweight kuandu">真实姓名</view>
				<input class="textright xiaohei" type="text" placeholder="请输入真实姓名" v-model="ali_name">
			</view>
			<view class="flexbetween margin_top xiahuaxian">
				<view class="ershiba xiaohei fonweight kuandu">支付宝账号</view>
				<input class="textright xiaohei" type="number" placeholder="请输入支付宝账号" v-model="ali_account">
			</view>
			<view class="flexbetween xiahuaxian margin_top">
				<view class="ershiba xiaohei fonweight kuandu">手机号码</view>
				<view class="xiaohei">{{mobile}}</view>
			</view>
			<view class="flexbetween margin_top">
				<view class="ershiba xiaohei fonweight kuandu">验证码</view>
				<view class="flexright">
					<input class="textright margin_right2 xiaohei" type="number" placeholder="请输入验证码" v-model="yzm_code">
					<view class="xiaolan ershiba textcenter"  style="width: 240rpx;" @click="sendyzm" v-show="codetext == 1">获取验证码</view>
					<view class="xiaolan ershiba textcenter"  style="width: 240rpx;" v-show="codetext == 2">{{second}}s后重新获取</view>
					<view class="xiaolan ershiba textcenter"  style="width: 240rpx;" @click="sendyzm" v-show="codetext == 3">重新发送</view>
				</view>
			</view>
		</view>
		<view class="gudingdb mainpadding">
			<view class="bigbtn" @click="submit">立即绑定</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				codetext: 1,
				second: 59,
				mobile: '',
				yzm_code: '',
				ali_name:"",
				ali_account:"",
				pageShow:false
			}
		},
		onShow() {
			this.init()
		},
		methods: {
			init() {
				httpRequest.request('/api/user/index', 'GET', {}, false, false, true).then(res => {
					this.mobile = res.data.mobile
					this.ali_name = res.data.ali_name || ""
					this.ali_account = res.data.ali_account || ""
					this.pageShow = true
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			//验证手机号
			isMobile(value) {
				let a = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(value);
				return a;
			},
			//发送验证码
			sendyzm() {
				let _this = this;
				if (_this.mobile == '') {
					httpRequest.toast("请输入手机号码!")
					return;
				}
				if (!_this.isMobile(_this.mobile)) {
					httpRequest.toast("手机号码格式错误!")
					return;
				}
				
				_this.codetext = 2;
				_this.second = 59;
				let timer = setInterval(function() {
					if (_this.second > 1) {
						_this.second--;
					} else {
						clearInterval(timer);
						_this.codetext = 3;
					}
				}, 1000)
				httpRequest.request('/api/sms/send', 'POST', {
					mobile: this.mobile,
					event: 'zfbcer',
				}, false, true, false).then(res => {
					if (res.code == 1) {
						httpRequest.toast('发送成功')
					}
				})
			},
			submit(){
				if(this.ali_name==""){
					httpRequest.toast("请输入真实姓名")
					return false
				}
				if(this.ali_account==""){
					httpRequest.toast("请输入支付宝账号")
					return false
				}
				if(this.yzm_code==""){
					httpRequest.toast("请输入验证码")
					return false
				}
				uni.showLoading({
					mask:true,
					title:"请稍候"
				})
				httpRequest.request('/api/user/editAliInfo','GET',{
					ali_name:this.ali_name,
					ali_account:this.ali_account,
					captcha:this.yzm_code,
				}).then(res => {
					uni.hideLoading()
					httpRequest.toast(res.msg);
					if(res.code == 1){
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},1000)
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.line{
	height: 24rpx;
	width: 1rpx;
	background-color: #999999;
}
.kuandu{
	width: 200rpx;
}
</style>
